<template>
	<view class="gt-nav-pc box-shadow">
		<view class="box ">
			<view class="box-logo">
				<view class="img"></view>
				<view class="btn-nav" @click="changeNav()">
					<uni-icons type="bars" color="#666" size="18px"></uni-icons>
				</view>
			</view>
			<view :class=" status ? ( status == 1 ? 'nav-list-pull' : 'nav-list-put' ) : 'nav-list' ">
				<view class="child">首页</view>
				<view class="child">优势</view>
				<view class="child">介绍</view>
				<view class="child">团队</view>
				<view class="child">伙伴</view>
				<view class="" v-if="!info">
					<view class="btn-login" @click="$skip.to('/login')">登录</view>
					<view class="btn-register" @click="$skip.to('/register')">注册</view>
				</view>
				<view v-else>
					<view class="btn-login" @click="$skip.to('/user/index')">控制台</view>
				</view>
				
			</view>
		</view>
		<view class="container">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-nav-pc",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			info: {
				type: [Boolean, Object],
				default: function() {
					return null
				}
			}

		},
		created() {},
		data() {
			return {
				status: 0
			}
		},
		computed: {},
		methods: {
			changeNav() {
				if (this.status === 0) {
					this.status = 1;
				} else if (this.status == 1) {
					this.status = 2;
				} else if (this.status == 2) {
					this.status = 1;
				}
			}
		}
	}
</script>

<style lang="scss">
	.btn-login {
		display: inline-block;
		height: 30px;
		padding: 0 10px !important;
		border-radius: 5px;
		background-color: #5b74ff;
		color: #fff;
		line-height: 30px;
		margin-right: 15px;
		cursor: pointer;
	}

	.btn-register {
		display: inline-block;
		height: 30px;
		padding: 0 10px !important;
		border-radius: 5px;
		background-color: #5b74ff;
		color: #fff;
		line-height: 30px;
		cursor: pointer;

	}

	/* 小尺寸 */
	@media (max-width: 768px) {
		.gt-nav-pc {
			.box {
				max-width: 1200px;
				padding: 10px 10px;
				margin: 0 auto;

				.box-logo {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
				}

				.img {
					width: 76px;
					height: 38px;
					background-color: red;
				}

				.nav-list {
					overflow: hidden;
					max-height: 0;
					
				}
				.nav-list-pull {
					animation-name: pull;
					animation-duration: 1s;
					animation-iteration-count: 1;
					line-height: 38px;
					overflow: hidden;
				}

				.nav-list-put {
					animation-name: put;
					animation-duration: 1s;
					animation-iteration-count: 1;
					overflow: hidden;
					line-height: 38px;
					max-height: 0px;
				}
 
				.btn-login {
					margin-top: 15px;
				}

				.btn-nav {
					display: inline-block;
					height: 30px;
					padding: 0 10px;
					border-radius: 5px;
					color: #fff;
					line-height: 30px;
					border: 1px solid #666;
				}
			}
		}

		/* 动画代码 */
		@keyframes pull {
			0% {
				max-height: 0px;
			}

			100% {
				max-height: 300px;
			}
		}

		@keyframes put {
			0% {
				max-height: 300px;
			}

			100% {
				max-height: 0px;
			}
		}
	}

	/* 大尺寸 */
	@media (min-width: 768px) {
		.gt-nav-pc {
			.box {
				max-width: 1200px;
				padding: 5px 15px;
				margin: 0 auto;
				display: flex;

				.img {
					width: 50px;
					height: 50px;
					background-color: red;
				}

				.nav-list,
				.nav-list-pull,
				.nav-list-put {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					flex-grow: 1;
					width: 0;
				}
				
				.nav-list > .child,.nav-list-pull > .child,.nav-list-put > .child{
					margin-right: 30px;
				}

				.btn-nav {
					display: none;
				}
			}
		}
	}
</style>